<template>
  <view class="content">
    <view class="top_content">
      <div class="personal_info">
        <img class="user_icon" :src="userInfo.F_HeadIcon" alt="" />
        <text class="user_name">{{ userInfo.F_Account }}</text>
      </div>
      <div>
        <!-- <u-button type="primary" size="mini" @click="logOut()">退出</u-button> -->
        <button @click="logOut()">退出</button>
      </div>
    </view>
    <view v-if="listData.length > 0" class="flex-wrp">
      <view v-for="(item, index) in listData" :key="index">
        <view class="list" @click="detailClick(item, index)">
          <view class="l_left" mode="heightFix">
            <text class="period">生产订单号：{{ item.poh_no }}</text>
            <text class="period">产品编码：{{ item.bii_code }}</text>
            <text class="period">产品名称：{{ item.bii_name }}</text>
          </view>
          <view class="r_item">
            <u-circle-progress
              active-color="#2979ff"
              :percent="parseFloat(item.construction_scheduling || 0)"
              width="110"
              :border-width="8"
            >
              <view class="u-progress-content">
                <view class="u-progress-dot"></view>
                <text class="u-progress-info"
                  >{{ item.construction_scheduling }}%</text
                >
              </view>
            </u-circle-progress>
            <!-- <u-button
              type="warning"
              size="mini"
              v-show="tabStatus == 1 || tabStatus == 2"
              @click="deleteClick(item)"
              >删除</u-button
            >
            <u-button
              type="primary"
              size="mini"
              v-show="tabStatus == 1 || tabStatus == 2"
              @click="editClick(item)"
              >编辑</u-button
            >-->
          </view>
          <view class="line"></view>
        </view>
      </view>
      <u-loadmore
        v-if="listData.length < total"
        style="loadmore"
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
      />
      <view v-if="listData.length == total" class="load-more" @click="loadMore"
        >~已到底~</view
      >
    </view>
    <view v-else>
      <view class="tkxxBox">
        <image :src="noData" class="tkxxPic" />
      </view>
      <view class="contentTxt">未发现有数据~</view>
    </view>
    <!-- <u-popup
      v-model="show"
      mode="center"
      width="500rpx"
      height="280px"
      border-radius="14"
      closeable
    >
      <view class="buttonBox">
        <u-button
          type="primary"
          class="company-item"
          @click="navClick('pages/company/recruit')"
          >全职招聘</u-button
        >
        <u-button
          type="primary"
          class="company-item"
          @click="navClick('pages/company/odd')"
          >零工招聘</u-button
        >
      </view>
    </u-popup> -->
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
export default {
  data() {
    return {
      show: false,
      userInfo: {},
      listData: [],
      page: 1, //0开始
      total: 0, //总页数
      hasMore: true,
      status: "loadmore",
      iconType: "circle",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      noData: "/static/image/msg.png",
    };
  },
  onPullDownRefresh() {
    //下拉刷新
    this.page = 1;
    this.loadData();
  },
  onReachBottom() {
    //上拉加载更多
    if (this.listData.length < this.total) {
      this.page++;
      this.loadData();
    }
  },
  created() {},
  onLoad() {
    this.page = 1;
    this.listData = [];
    this.loadData();
    uni.$on("refreshProgress", this.refreshProgress);
  },
  beforeDestroy() {
    uni.$off("refreshProgress", this.refreshProgress);
  },
  onShow() {
    let userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.userInfo = userInfo;
    } else {
      // this.$u.route({
      //   url: "/pages/login/index",
      // });
      uni.reLaunch({
        url: "/pages/login/index",
      });
    }
  },
  mounted() {},
  computed: {},
  methods: {
    loadData() {
      api
        .orderList({
          pob_state: 4,
          limit: this.page,
          size: 10,
        })
        .then((res) => {
          if (res.success) {
            if (this.page === 1) {
              this.listData = res.data.Rows;
               uni.stopPullDownRefresh(); 
            } else {
              this.listData = [...this.listData, ...res.data.Rows];
            }
            // this.hasMore = res.data.Rows.length === 10;
            this.total = res.data.Total;
          }
        })
        .finally((e) => {});
    },
    loadMore() {
      this.page += 1;
      this.loadData();
    },
    logOut() {
      uni.showModal({
        title: "提示",
        content: "确认退出？",
        success: async (res) => {
          if (res.confirm) {
            uni.removeStorageSync("userInfo");
            this.$u.route({
              url: "/pages/login/index",
            });
          }
        },
      });
    },
    getQueryUserInfo() {
      var name = "userInfo";
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        let userInfo = JSON.parse(unescape(r[2]));
        return userInfo;
      } else {
        return null;
      }
    },
    detailClick(item, index) {
      this.$u.route({
        url: "/pages/home/orderDetal",
        // query: {
        //   item: JSON.stringify(item),
        //   index: index,
        // },
        params: { row: JSON.stringify(item), index: index },
      });
    },
    refreshProgress(data) {
      // 更新当条数据的进度
      // this.listData[data.index].construction_scheduling =
      //   data.construction_scheduling;
      // this.listData[data.index].creator_id =
      //   data.creator_id;
      // this.listData[data.index].customer_code =
      //   data.customer_code;
      this.page = 1;
      this.loadData();
    },
  },
};
</script>

<style>
.content {
  width: 100%;
  /* height: 100%; */
  background-image: url("../../assets/imgs/bg.png");
  background-size: 100% 100%;
  min-height: 100vh;
}
.top_content {
  padding: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.personal_info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.user_icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.user_icon:hover {
  transform: scale(1.1);
}
.user_name {
  font-size: 30rpx;
  margin-left: 10px;
  color: #333;
}
.flex-wrp {
  flex: 1;
  padding: 0 10px;
}
.list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-bottom: 10px ; */
  margin: 10px 0;
  padding: 0 10rpx;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}
/* .list:first-child {
  margin-top: 20rpx;
}
.list not-first-child {
  margin-top: 10rpx;
} */
.list:hover {
  /* transform: translateY(-5px); */
}
.l_left {
  height: 250rpx;
  /* max-width: 250rpx; */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.salary {
  margin-left: 30rpx;
}
.period {
  margin-top: 30rpx;
}
.r_item {
  /* margin: 5px 0;
  display: inline-grid; */
  display: flex;
  width: 160rpx;
  align-items: center;
  justify-content: center;
}
.tkxxBox {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50%;
  margin-bottom: 28rpx;
}
.tkxxPic {
  width: 54%;
  height: 280rpx;
  display: block;
}
.contentTxt {
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
button {
  background-color: #00796b;
  color: #fff;
  border: none;
  border-radius: 6rpx;
  cursor: pointer;
  height: 50rpx;
  font-size: 28rpx;
  line-height: 50rpx;
}
.load-more {
  text-align: center;
  margin-top: 20px;
  color: #00796b;
  cursor: pointer;
}
.load-more:hover {
  text-decoration: underline;
}
</style>
